<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限设置</title>
    <link rel="stylesheet" href="../../css/wxq.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../font/css/font-awesome.min.css">
    <style>
        .role_item{
            display: inline-block;
            padding: 0px 5px;
            margin-right: 10px;
            height: 28px;
            line-height: 30px;
            cursor: pointer;
            color: #696969;
            border: 1px solid #b1b1b1;
            font-size: 12px;
            border-radius: 4px;
            transition: all 0.2s
        }
        .selected{border: 1px solid #e2231a;color:#e2231a;transition: all 0.2s }
    </style>
</head>
<body>

<!--头部公共样式-->
<header class="header">
    <div class = "logo float_left"><a href="../index/index.html">后台管理系统</a></div>
    <div class = "header_right">
        <nav>
            <ul>

                <li>
                    <a title="更多"><i class = "fa fa-navicon"></i></a>
                    <ul class="dropdown_menu">
                        <li id = "logout">&nbsp;<i class = "fa fa-sign-out"></i>&nbsp;退出</li>
                    </ul>
                </li>
                <li>
                    <a href="../message/messages.html" title = "消息"><i class = "fa fa-envelope"></i></a>
                    <span class="message_count"></span>
                </li>
            </ul>
        </nav>
        <div class = "message_warp_info"></div>
    </div>
</header>

<div class="container">

    <!--左边导航区-->
    <div class="slide" id ="slide">

        <!--左边管理员信息区域-->
        <div class = "admin_info">
            <a href="#" class = "admin_header_img">
                <img src="../../images/test_header.png" alt="">
                <div class = "upload_header_img">更换</div>
            </a>
            <div class = "admin_detail">
                <span class = "admin_type">超级管理员</span>
                <span class = "admin_name">王小强</span>
            </div>
        </div>

        <!--左边导航按钮区域-->
        <ul class = "menu" >
            <li>
                <a href="../index/index.html" class="super_menu">
                    <i class="fa fa-home"></i>&nbsp;&nbsp;首页
                </a>
            </li>
            <li>
                <a class="super_menu">
                    <i class="fa fa-gears"></i>&nbsp;&nbsp;系统配置<i class="fa fa-angle-right"></i>
                </a>
                <ul class = "menu_child_list" >
                    <li>
                        <a href="../conf/bannerSetting.html">
                            <i class="fa fa-image"></i>&nbsp;&nbsp;banner管理
                        </a>
                    </li>
                </ul>
            </li>

            <li>
                <a class="super_menu">
                    <i class="fa fa-users"></i>&nbsp;&nbsp;用户管理<i class="fa fa-angle-right"></i>
                </a>
                <ul class = "menu_child_list isSuper" >
                    <li>
                        <a href="../user/userList.html">
                            <i class="fa fa-user"></i>&nbsp;&nbsp;用户列表
                        </a>
                    </li>
                    <li>
                        <a href="../member/memberManagement.html">
                            <i class="fa fa-user-plus"></i>&nbsp;&nbsp;会员管理
                        </a>
                    </li>
                    <li>
                        <a href="../member/integralSetting.html">
                            <i class="fa fa-vcard"></i>&nbsp;&nbsp;积分设置
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="super_menu">
                    <i class="fa fa-cart-plus"></i>&nbsp;&nbsp;商城管理<i class="fa fa-angle-right"></i>
                </a>
                <ul class = "menu_child_list isSuper">
                    <li>
                        <a href="../category/goodsCategory.html">
                            <i class="fa fa-bar-chart"></i>&nbsp;&nbsp;商品分类
                        </a>
                    </li>
                    <li>
                        <a href="../freight/freightTemplate.html">
                            <i class="fa fa-cart-arrow-down"></i>&nbsp;&nbsp;运费模板
                        </a>
                    </li>
                    <li>
                        <a href="../goods/goodsList.html">
                            <i class="fa fa-list"></i>&nbsp;&nbsp;商品列表
                        </a>
                    </li>
                    <li>
                        <a href="../order/orderList.html">
                            <i class="fa fa-first-order"></i>&nbsp;&nbsp;订单管理
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="../message/messages.html" class="super_menu ">
                    <i class="fa fa-comment"></i>&nbsp;&nbsp;消息管理
                </a>
            </li>
            <li>
                <a href="../index/dataStatistics.html" class="super_menu">
                    <i class="fa fa-signal"></i>&nbsp;&nbsp;数据统计
                </a>
            </li>
            <li>
                <a href="authoritySetting.html" class="super_menu active">
                    <i class="fa fa-unlock"></i>&nbsp;&nbsp;权限管理
                </a>
            </li>
        </ul>
    </div>

    <div class="main_content" id = "admin">

        <div class="warp">
            <div class = "position">
                <span>当前位置：</span>
                <span>
                    <a href="#">权限设置</a>
                </span>
            </div>
        </div>
        <div class="warp">
            <div class = "tab">
                <ul>
                    <li class = "tab-active tab-title" data-index="0">列表</li>
                    <li class = "tab-title" data-index="1">添加</li>
                </ul>
            </div>
            <div class="warp tab-item tab-item-active" data-index="0">
                <table class="table table_border_bottom">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>账号</th>
                        <th>密码</th>
                        <th>添加时间</th>
                        <th>是否可用</th>
                        <th>拥有权限</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in resources.list" v-if = "item.role !== '超级管理员'">
                        <td v-text = "item.id"></td>
                        <td v-text = "item.username"></td>
                        <td v-text = "item.password"></td>
                        <td v-text = "item.add_time"></td>
                        <td v-if = "item.is_enable" v-text = "'是'"></td>
                        <td v-else v-text = "'否'"></td>
                        <td v-text = "item.role"></td>
                        <td>
                            <a :href = "'./editAdmin.html?id='+item.id" class="cursor_p" title = "编辑" :data-id="item.id">修改</a>
                            <a class="cursor_p" title = "删除" :data-id="item.id" @click = "deleteUser">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="warp tab-item" data-index="1">
                <div class = "form">
                    <div class = "form_item">
                        <label for="username" class="form_label">管理员名称</label>
                        <div class = "input_div_block input_t_single">
                            <input type="text" id="username" placeholder="管理员名称" class = "form_input">
                        </div>
                    </div>
                    <div class = "form_item">
                        <label for="password" class="form_label">管理员密码</label>
                        <div class = "input_div_block input_t_single">
                            <input type="text" id="password" placeholder="管理员密码" class = "form_input">
                        </div>
                    </div>

                    <div class = "form_item">
                        <label for="nick_name" class="form_label">昵称</label>
                        <div class = "input_div_block input_t_single">
                            <input type="text" id="nick_name" placeholder="昵称" class = "form_input">
                        </div>
                    </div>
                    <div class = "form_item">
                        <label class="form_label">权限添加</label>
                        <div class = "input_div_block input_t_single">
                            <span class="role_item" data-role="GOODS">商品权限</span>
                            <span class="role_item" data-role="ORDER">订单权限</span>
                            <span class="role_item" data-role="USER">用户权限</span>
                            <span class="role_item" data-role="FREIGHT">运费权限</span>
                            <span class="role_item" data-role="CATEGORY">分类权限</span>
                            <span class="role_item" data-role="MESSAGE">消息权限</span>
                            <span class="role_item" data-role="BANNER">轮播图权限</span>
                        </div>
                    </div>
                    <div class = "form_item">
                        <label for="submit" class="form_label"></label>
                        <div class = "input_div_block input_t_single" id = "submit">
                            <button class="btn btn_default" @click = "addAdminUser">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src = "../../js/jquery-3.2.1.min.js"></script>
<script src="../../my_js/sockjs.min.js"></script>
<script src="../../my_js/stomp.min.js"></script>
<script src="../../js/nicevalidate.js"></script>
<script src = "../../my_js/common.js"></script>
<script src = "../../js/wxq.js"></script>
<script src = "../../js/vue.min.js"></script>
<script>
    let current = 0;
    let app = new Vue({
        el:"#admin",
        data: {
            resources:[],
            role:"",
        },
        mounted:function () {
            wxqUI.tabSwitch($(".tab-title"));
            wxqUI.tabClick($(".tab-title"),$(".tab-item"));
            this.first_page();
            this.selectRole();
        },
        methods: {
            first_page: function () {
                this.getUserList(1,pageSize)
            },
            last_page:function () {
                if(this.resources.currentPage < this.resources.totalPage){
                    this.getUserList(this.resources.currentPage,pageSize)
                }
            },
            pre_page:function () {
                if(this.resources.currentPage > 1){
                    this.getUserList(this.resources.currentPage,pageSize)
                }
            },
            next_page:function () {
                if(this.resources.currentPage < this.resources.totalPage){
                    this.getUserList(this.resources.currentPage,pageSize)
                }
            },
            getUserList:function (currentPage,pageSize) {
                $.get(rootPath+"/admin",{currentPage:currentPage,pageSize:pageSize}, (res)=> {
                    if(res.meta.code === 200){
                        this.resources = res.data;
                    }else {
                        this.resources = [];
                        alert("请求失败--"+res.meta.message)
                    }
                })
            },
            deleteUser:function (e) {
                e.stopPropagation();
                e.preventDefault()
                $.get(rootPath+"/admin/delete/"+e.target.dataset.id, (res)=> {
                    if(res.meta.code === 200){
                        this.first_page();
                    }else {
                        this.resources = [];
                        alert("请求失败--"+res.meta.message)
                    }
                })
            },
            selectRole:function () {
                let that = this;
                $(".role_item").click( function(e) {
                    if ($(this).hasClass("selected")){
                        $(this).removeClass("selected")
                    }else {
                        $(this).addClass("selected")
                    }
                    that.role = "";
                    for (let i = 0;i<$(".role_item").length;i++){
                        if($($(".role_item")[i]).hasClass("selected")){
                            if(that.role){
                                that.role = that.role+","+$(".role_item")[i].dataset.role
                            }else {
                                that.role = $(".role_item")[i].dataset.role
                            }
                        }
                    }
                })
            },
            addAdminUser:function () {
                let nv = new NiceValidate([
                    {dom:document.querySelector("#username")},
                    {dom:document.querySelector("#password")},
                    {dom:document.querySelector("#nick_name"),is_true:true},
                ])
                let data = nv.niceValidate();
                if(data){
                    data.role = this.role;
                    console.log(data);
                    $.post(rootPath+"/admin",data, (res)=> {
                        if(res.meta.code === 200){
                            alert("添加成功")
                            this.first_page()
                        }else {
                            alert("请求失败--"+res.meta.message)
                        }
                    })
                }
            }
        }

    })
</script>

</body>
</html>